<template>
	<div ref="chartUser" :style="{height, width}"></div>
</template>
<script lang="ts">
	import {defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted} from 'vue';
	import {useECharts} from '/@/hooks/web/useECharts';
	import {cloneDeep} from 'lodash-es';
	export default defineComponent({
		name: 'bar',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			width: {
				type: String as PropType<string>,
				default: '100%',
			},
			height: {
				type: String as PropType<string>,
				default: '280px',
			},
			titleValue: {
				type: Object,
				default: () => ({}),
			},
		},
		setup(props) {
			const chartUser = ref<HTMLDivElement | null>(null);
			const {setOptions, resize} = useECharts(chartUser as Ref<HTMLDivElement>);
			let seriesData = props.chartData;
			let legend = props.chartData.map((item) => {
				return item.name;
			});
			let userTit = props.titleValue.title;
			let proportion = props.titleValue.proportion;
			let color = ['#46a6ff', '#8146ff', '#30e8bb', '#f9c807', '#ff9447', '#f7c73a', '#7686a3', '#74a0fa', '#73deb4', '#ec7f66', '#4AEAB0'];
			const option = reactive({
				// color:color,
				// backgroundColor: '#000',
				color: color,
				title: {
					text: '{val|' + props.titleValue.proportion + '}\n {name|' + userTit + '}',
					top: 'center',
					left: '17%',
					textStyle: {
						rich: {
							name: {
								fontSize: 14,
								fontWeight: 'normal',
								color: '#7D8590',
								textAlign: 'center',
								// padding: [10, 0]
							},
							val: {
								fontSize: '1.875rem',
								textAlign: 'center',
								color: '#333333',
							},
						},
					},
				},
				grid: {
					top: '15%',
					left: 0,
					right: '1%',
					bottom: 5,
					containLabel: true,
				},
				legend: {
					type: 'scroll',
					orient: 'vertical',
					top: 'center',
					left: '50%',
					// itemWidth: 16,
					itemHeight: 16,
					itemGap: 25,
					textStyle: {
						align: 'left',
						verticalAlign: 'middle',
						rich: {
							name: {
								// width: 100,
								color: '#424542',
								fontSize: 14,
								// padding: [10, 15, 10, 15],
							},
							value: {
								color: '#002439',
								align: 'right',
                textAlign: 'right',
								fontSize: 14,
								// padding: [10, 15, 10, 15],
							},
							rate: {
								color: '#686868',
								fontSize: 14,
								padding: [10, 7, 10, 3],
							},
						},
					},
					data: props.chartData.map((item) => {
						return item.name;
					}),
					formatter: (name) => {
						if (props.chartData.length) {
							const item = props.chartData.filter((item) => item.name === name)[0];
							// return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
							return `{name|${name}：}{value| ${item.value}} `;
						}
					},
				},
				series: [
					{
						name: '需求类型占比',
						type: 'pie',
						colorBy: 'data',
						center: ['25%', '50%'],
						radius: ['65%', '90%'],
						label: {
							normal: {
								show: false,
								position: 'center',
								// formatter: '{value|{c}}\n{label|{b}}',
								rich: {
									value: {
										padding: 5,
										align: 'center',
										verticalAlign: 'middle',
										fontSize: 32,
									},
									label: {
										align: 'center',
										verticalAlign: 'middle',
										fontSize: 16,
									},
								},
							},
							emphasis: {
								show: false,
								textStyle: {
									fontSize: '12',
								},
							},
						},
						labelLine: {
							show: false,
							length: 0,
							length2: 0,
						},
						itemStyle: {
							normal: {
								color: function (colors) {
									var colorList = ['#46a6ff', '#8146ff', '#30e8bb', '#f9c807', '#ff9447', '#f7c73a', '#7686a3', '#74a0fa', '#73deb4', '#ec7f66', '#4AEAB0'];
									return colorList[colors.dataIndex];
								},
							},
						},
						data: [],
					},
				],
			});


			watch(
				() => props.chartData,
				() => {
          console.log('watchEffect props.chartData', props.chartData);
        
				props.chartData && initCharts();
				},
				{deep: true}
			)
			function initCharts() {
				if (props.option) {
					Object.assign(option, cloneDeep(props.option));
				}

				option.series[0].data = props.chartData;
				option.legend.data = props.chartData.map((item) => {
					return item.name;
				});
        option.title.text='{val|' + props.titleValue.proportion + '}\n {name|' + '预警总数' + '}',

				setOptions(option);
			}
			onMounted(() => {
				window.addEventListener('resize', function () {
					resize();
				});
			});
			return {chartUser};
		},
	});
</script>
